<template>
  <div class="page_vue">
    <!-- 图表区域 -->
    <div class="echarts_page">
      <!-- <div class="echarts_top">
        <el-tooltip effect="dark" :content="$t('home.platformUsage')" placement="bottom-start">
          <span>{{ $t('home.platformUsage') }}</span>
        </el-tooltip>
        <section class="echarts_left" ref="echarts_left"></section>

      </div> -->

      <!-- <section class="echarts_right" ref="echarts_right"></section> -->
      <div class="echarts_top">
        <el-tooltip effect="dark" :content="$t('home.personalSpace')" placement="bottom-start">
          <span>
            {{ $t('home.personalSpace') }}:({{ proxy?.$yuUtils.filterSizeUnit(dataInfo?.storageSum) }})
            <el-icon @click="refreshSizeClick"><Refresh /></el-icon>
          </span>
        </el-tooltip>

        <!-- <section class="echarts_right" id="container"></section> -->
        <div id="liquidfill" class="echarts_right"></div>
      </div>
    </div>

    <div class="text">
      <p>
        {{ $t('home.department') }} : <span>{{ userStore.deptName }}</span>
      </p>
      <p>
        {{ $t('home.account') }} : <span>{{ userStore.name }}</span>
      </p>
    </div>
    <div class="text">
      <p class="">
          <span >登录天数 : </span>
          <span class="lab">{{ dataInfo.loginDays }}天</span>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import useUserStore from '@/store/modules/user';
import homeIndexApi from '@/api/homeIndex/homeIndexApi';
import 'echarts-liquidfill';

const {proxy} = getCurrentInstance() as any
const userStore: any = useUserStore()
const learning = ref(0)
const totalDays = ref(0)
const frequency: any = ref(0)
const dataTime = ref(0)
const dataInfo:any = ref({})

const chartInstance: any = ref(null);
// 获取平台使用率接口
const apiLoginFrequency = () => {
  homeIndexApi.userGetHomepageApi().then((res: any) => {
    dataInfo.value = res.data
    // frequency.value = ((res.data.UseDays / res.data.totalDays) * 100).toFixed(2);
    updateChart()

    // this.dataTime = res.obj.UseDays; // 已登录天数
    // // 获取天数星星
    // this.DaysStars(res.obj);
  });
}

const updateChart = () => {
  let sizePercent_decimals:any = (dataInfo.value.storageUse / dataInfo.value.storageSum).toFixed(2);
        chartInstance.value = markRaw(echarts.init(document?.getElementById(`liquidfill`)));
        const option = {
          backgroundColor: '#fff',
        width: '100%',
        height: '100%',
        series: [
          {
            color: ['#D3E0FF', '#165DFF'], //波浪的颜色
            type: 'liquidFill',
            radius: '90%',
            data: [
              //波浪的高度占比 (第一个是浅色的 : 在传过来的数据上加上一点作为展示效果,第二个用传过来的数据)
              {
                value: sizePercent_decimals + 0.05,
              },
              {
                value: sizePercent_decimals,
              },
            ],
            center: ['50%', '50%'], //图在整个画布的位置
            backgroundStyle: {
              color: 'white',
              borderColor: '#F0F2F5', //边框颜色
              borderWidth: 5, //边框粗细
              shadowColor: '#ffffff', //阴影颜色
              shadowBlur: 20, //阴影范围
            },
            label: {
              //水球图里面的文字喝字体等设置
              normal: {
                formatter: function (value) {
                if (!value) {
                  return '加载中';
                } else {
                  return sizePercent_decimals*100 + '%';
                }
              },
                textStyle: {
                  fontSize: 22,
                },
              },
            },
            outline: {
              //水球图的外层边框 可设置 show:false  不显示
              itemStyle: {
                borderColor: '#DCDCDC',
                borderWidth: 3,
              },
              borderDistance: 0,
            },
            itemStyle: {
              opacity: 0.95,
              shadowColor: 'rgba(0,0,0,0)',
            },
          },
        ],
        }
        chartInstance.value.setOption(option, true);
        chartInstance?.value?.resize()
    }


const refreshSizeClick = () =>{
  apiLoginFrequency()
}
onMounted(() => {
  apiLoginFrequency()
})

</script>


<style scoped lang='scss'>
.echarts_page {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;

  .echarts_top {
    width: 128px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      font-size: 14px;
      display: inline-block;
      /* 也可以使用 block */
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .echarts_left {
    width: 100%;
    height: 130px;
    // border: 1px solid red;
  }

  .echarts_right {
    width: 100%;
    height: 130px;
    // border: 1px solid black;
  }
}

.text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 13px;

  .learning {
    display: flex;
    align-items: center;

  }
  .lab{
    color: #ff9900;
  }
  p {
    margin: 8px 0;
  }
}
</style>